<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<meta name="force-rendering" content="webkit" />
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
		<title>Report</title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/jqcloud.min.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/responsive.css" />
		
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="main">
			<div class="report-box">
				<div class="hd g-header">
					<div class="left">
						<div class="logo">
							<a href="javascript:void(0);"><img src="images/logo.png" alt=""></a>
						</div>
					</div>
					<div class="right">
						<div class="component">
							<div class="tabs">
								<a  href="javascript:void(0);">Parameters</a>
								<a class="active" href="javascript:void(0);">Report</a>
								<a href="javascript:void(0);">User</a>
							</div>
							<div class="user">
								<ul>
									<li>
										<a href="javascript:void(0);"><img src="images/icon_03.png"></a>
									</li>
									<li>
										<a class="user-button" href="javascript:void(0);"><img src="images/icon_04.png"><span>Admin</span></a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="bd">
					<div class="top">
						<div class="parameters item-style">
							<div class="tit">
								Top viewed parameters
							</div>
							<div class="content">
								<div class="table g-table">
									<div class="theader">
										<ul>
											<li>
												Parameter
											</li>
											<li>
												<button type="button">Viewed</button>
											</li>
											<li>
												Last viewer
											</li>
											<li>
												Last viewed
											</li>
										</ul>
									</div>
									<div class="tbody">
										<ul>
											<li>
												<div class="parameter">
													Godiva parameter
												</div>
												<div class="viewed">
													368
												</div>
												<div class="last-viewer name">
													<img src="images/name.png" alt="">
													<span>Chris Wu</span>
												</div>
												<div class="last-viewed">
													5 mins ago
												</div>
											</li>
											<li>
												<div class="parameter">
													Parameter 2
												</div>
												<div class="viewed">
													321
												</div>
												<div class="last-viewer name">
													<img src="images/name.png" alt="">
													<span>Amy Smith</span>
												</div>
												<div class="last-viewed">
													3 hrs ago
												</div>
											</li>
											<li>
												<div class="parameter">
													Parameter 3
												</div>
												<div class="viewed">
													248
												</div>
												<div class="last-viewer name">
													<img src="images/name.png" alt="">
													<span>Amy Smith</span>
												</div>
												<div class="last-viewed">
													Yesterday at 01:48pm
												</div>
											</li>
											<li>
												<div class="parameter">
													Parameter 4
												</div>
												<div class="viewed">
													137
												</div>
												<div class="last-viewer name">
													<img src="images/name.png" alt="">
													<span>John Doe</span>
												</div>
												<div class="last-viewed">
													Jan 03, 2020 at 05:29pm
												</div>
											</li>
											<li>
												<div class="parameter">
													Parameter 5
												</div>
												<div class="viewed">
													32
												</div>
												<div class="last-viewer name">
													<img src="images/name.png" alt="">
													<span>Amy Smith</span>
												</div>
												<div class="last-viewed">
													Jan 01, 2020 at 09:32am
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
						<div class="keywords item-style">
							<div class="tit">
								Top search Keywords
							</div>
							<div class="content">
								<div id="whatever">
									 
								</div>
							</div>
						</div>
					</div>
					<div class="small">
						<div class="category item-style">
							<div class="tit">
								Top category
							</div>
							<div class="content">
								<div id="category" ></div>
							</div>
						</div>
						<div class="usage item-style">
							<div class="tit">
								Background Usage
							</div>
							<div class="content">
								<div id="usage" ></div>
							</div>
						</div>
						
						<div class="top-user item-style">
							<div class="tit">
								Top User
							</div>
							<div class="content">
								<div class="table g-table">
									<div class="theader">
										<ul>
											<li>
												User
											</li>
											<li>
												<button type="button">Visit</button>
											</li>
										</ul>
									</div>
									<div class="tbody">
										<ul>
											<li>
												<div class="user name">
													<img src="images/name.png" alt="">
													<span>Chris Wu</span>
												</div>
												<div class="visit">
													368
												</div>
											</li>
											<li>
												<div class="user name">
													<img src="images/name.png" alt="">
													<span>Amy Smith</span>
												</div>
												<div class="visit">
													321
												</div>
											</li>
											<li>
												<div class="user name">
													<img src="images/name.png" alt="">
													<span>Sarah Chen</span>
												</div>
												<div class="visit">
													248
												</div>
											</li>
											<li>
												<div class="user name">
													<img src="images/name.png" alt="">
													<span>John Doe</span>
												</div>
												<div class="visit">
													137
												</div>
											</li>
											<li>
												<div class="user name">
													<img src="images/name.png" alt="">
													<span>Nancy Fang</span>
												</div>
												<div class="visit">
													32
												</div>
											</li>
										</ul>
									</div>
								</div> 
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 遮罩层 -->
		<div class="shade"></div>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jqcloud.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- <script src="js/jquery.tagcloud.js" type="text/javascript" charset="utf-8"></script> -->
		<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				// 柱状图
				var category = echarts.init(document.getElementById('category'));
				var categoryOption = {
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    grid: {
						top:'0',
				        left: '0%',
				        right: '2%',
				        bottom: '0%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'value',
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
				    },
				    yAxis: {
				        type: 'category',
				        data: ['Food', '360 Photos', 'Fashion Accessories', 'Pets', 'Home Decor', 'Electronics','Books & Stationary','Apparel','Beauty'],
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
				    },
				    series: [
				        {
				            name: 'category',
				            type: 'bar',
				            data: [130, 136, 200,262,247,258,281,398,439],
							barWidth : 18,
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
										offset: 0.4,
										color: '#F7BD87'
									}, {
										offset: 1,
										color: '#E67D56'
									}]),
									label: {
										show: true, //开启显示
										position: 'insideRight', //在上方显示
										textStyle: { //数值样式
											color: 'white',
											fontSize: 12
										}
									}
								}
							},
				        }
				    ]
				};
				category.setOption(categoryOption);
				
				
				// 饼图
				let dataPie = [
						{
							value: 1947,
							name: 'White',
							itemStyle: {
							 	normal: {//颜色渐变
							 		color: 'rgb(255,228,187)'
							 	}
							},
							emphasis:{
							 	itemStyle:{
							 		color: '#FDD79C'
							 	}
							}
						},
						{
							value: 523,
							name: 'Creative',
							itemStyle: {
							 	normal: {//颜色渐变
							 		color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [{
							 			offset: .4,
							 			color: '#F7BD87'
							 		}, {
							 			offset: 1,
							 			color: '#E67D56'
							 		}]),
							 	},
							} 
							
						},
					];
					let total = 0;
					dataPie.forEach(function(val, idx, arr) {
					     total += val.value;
					})
					var usage = echarts.init(document.getElementById('usage'));
					var usageOption = {
							tooltip: {
								trigger: 'item',
								formatter: '{a} <br/>{b} : {c} ({d}%)'
							},
							legend: {
								data: ['White', 'Creative'],
								orient: 'vertical',
								top:'15%',
								left: $(window).width() < 1480 ? '55%':'60%',
								inactiveColor:'#ccc',
								itemGap: 80,
								itemWidth: 20,
								itemHeight: 20,
								formatter: function(name) {
									 let target,percent;
									 for (let i = 0; i < dataPie.length; i++) {
										 if (dataPie[i].name === name) {
											 target = dataPie[i].value;
											 percent = ((target/total)*100).toFixed(2);
										 }
									 }
									 let arr = [ ' {name|'+ name + '}' + ' {percent|'+ percent + '%}',' {value|'+ target + '}'];
									 return arr.join("\n ")
								},
								textStyle: {
									lineHeight: 20,
									fontSize:16,
									rich: {
										value: {
											color: '#F7BD87',
											fontSize: $(window).width() < 1480 ? 26 : 44,
											padding: [0, 0,80, 0]
										},
										name: {
											color: '#000',
											fontSize: 12,
											padding: $(window).width() < 1480 ? [0, 10, 25, 0] :[0, 25, 25, 0]
										},
										percent: {
											color: '#000',
											fontSize: 14,
											padding: [0, 0, 25, 0]
										}
									}
								},
							},
							series: [
								{
									name:'参数',
									type: 'pie',
									radius: $(window).width() < 1480 ? '55%' : '75%',
									center: ['30%', '50%'],
									data: dataPie ,
									label: {
					                    normal: {
					                       position: 'inner',
					                       show : false
					                    }
					                },
								
								},	
								{
									name: '外边框',
									type: 'pie',
									clockWise: false, //顺时加载
									hoverAnimation: false, //鼠标移入变大
									center: ['30%', '50%'],
									radius: $(window).width() < 1480 ? ['55%', '55%'] : ['75%', '75%'],
									label: {
										normal: {
											show: false
										}
									},
									data: [{
										value: 9,
										name: '',
										itemStyle: {
											normal: {
												borderWidth: 2,
												borderColor: '#EAEAEA'
											}
										}
									}]
								},
							]
						};
					usage.setOption(usageOption);
				
				window.onresize = function () {
					category.resize();
					usage.resize();
				}
				 
				var words = [
					{text: "Lorem", weight: 1,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Ipsum", weight: 2,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Dolor", weight: 1,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Sit", weight: 4,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Amet", weight: 8,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Consectetur", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Holiday", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "test", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "studio", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "harsh", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "holidays", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "White", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "glare", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Lifestyle", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "party", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "knoll", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "outdoor", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "beach", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "Soft", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "shadow", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "fall", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "European", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "winter", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "light", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
					{text: "modern", weight: 5,link: 'http://github.com/mistic100/jQCloud'},
				];
				for(var i = 0; i < words.length; i++){
					words[i].weight=getRandom(12,70)
				}
				$("#whatever").jQCloud(words, {
					autoResize: true,
					colors: ["#9d9d9d", "#d07d2d"],
					fontSize: {
					    from: '70px',
					    to: '12px'
					}
				});
			})
			
			function getRandom(start, end, fixed=0) {
				let differ = end - start
				let random = Math.random()
				return (start + differ * random).toFixed(fixed)
			}
		
		</script>
	</body>

</html>
